<template>
  <div class="bar-content">
    <div class="bar-box" v-for="(item,index) in barDatas">
      <div class="bar-position">
        <p class="bar-title">
          <span class="bar-title-spot"></span>
          {{ item.name}}
        </p>
          <div class="bar">
            <div class="bar-proportion" :style="{'width': item.value/max * wth + 'px'}"></div>
          </div>
          <div class="bar-num">{{item.value}} </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'bar-content',
    props: ["barDatas"],
    data() {
      return {
        max: '0px',
        wth: 0
      }
    },
    mounted() {
      let bar = document.getElementsByClassName('bar')[0];
      this.wth = bar.clientWidth;

      this.max = 0;
      this.barDatas.forEach(item => {
        if(item.value > this.max) {
          this.max = item.value;
        }
      })
      this.max = Math.round(this.max *= 1.1);
    },
    methods: {

    }
  }
</script>

<style scoped>
  p {
    margin: 0;
  }
  .bar-content {
    height: 100%;
  }
  .bar-box {
    height: 33%;
    position: relative;
  }
  .bar-position {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
  .bar-title-spot {
    display: inline-block;
    height: 0.4em;
    width: 0.4em;
    border-radius: 50%;
    background-color: #fff;
    vertical-align: middle;
  }
  .bar-title {
    color: #fff;
    font-size: 1em;
  }
  .bar {
    height: 0.8em;
    width: 75%;
    background-color: #000000;
    display: inline-block;
  }
  .bar-num {
    color: rgba(132, 132, 132, 1);
    vertical-align: top;
    display: inline-block;
  }
  .bar-proportion {
    background-image: linear-gradient(to right, RGBA(0, 154, 221, 1), RGBA(0, 43, 165, 1));
    height: 100%;
  }

</style>
